<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1 v-color123='col'>{{name}}</h1>
    <h1 v-color123>{{name}}</h1>
    <div>
      <button v-permission='10'>按钮</button>
      <button v-permission='4'>按钮</button>
    </div>

  </div>
</body>

</html>
<!-- 
  自定义指令  全局自定义指令；  局部自定义指令
    自定义指令对应的哪个回调函数中的this 不是当前实例

    全局自定义指令 是所有组件 都能使用
    局部自定义指令  是只有当前组件能使用
    当前全局跟局部重名的时候 优先使用局部的



 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  Vue.directive('color123', function (el, obj) {
    // el对应的就是 使用这个指令的哪个元素
    console.log(arguments)
    el.style.color = obj.value || '#333'
  }) 
  // {
  //   bind(el, obj) {
  //       console.log(arguments)
  //       el.style.color = obj.value || '#333'
  //     },
  //     updated(el, obj) {
  //       console.log(arguments)
  //       el.style.color = obj.value || '#333'
  //     }
  // }
  // Vue.directive('permission',function(el,{value}){
  //   // el.style.display = (value > 5 ? 'block' : 'none')
  //   console.dir(el)
  //   if(value <=5){
  //     el.parentNode&&el.parentNode.removeChild(el)
  //   }
  // })
  Vue.directive('permission', {
    inserted(el, obj) {
      if (obj.value <= 5) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  })
  let vm = new Vue({
    el: '#app',
    data: {
      name: "珠峰",
      col: 'red'
    },
    directives: {
      // color123(el,obj){
      //   el.style.color ='blue'
      // }
      color123: {
        bind(el, obj) {
          el.style.color = 'blue'
        }
      }
    }
  });
</script>